﻿@{
    ViewData["Title"] = "home";
    Layout = null;

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>销售分析页面</title>
    <link href="~/layui-v2.9.16/layui/css/layui.css" rel="stylesheet" />
    
</head>
<body>

    <div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">库存信息</div>
                <div class="layui-card-body">
                    <table class="layui-table" style="margin:0;">
                        <colgroup>
                            <col width="150">
                            <col width="300">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>库存总量</td>
                                <td>76,763,424.80</td>
                            </tr>
                            <tr>
                                <td>库存成本</td>
                                <td>3,665,745,933.54</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header">本年销售信息</div>
                <div class="layui-card-body">
                    <table class="layui-table" style="margin:0;">
                        <colgroup>
                            <col width="150">
                            <col width="300">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>本年销售总额</td>
                                <td>16,349.00</td>
                            </tr>
                            <tr>
                                <td>本年销售毛利</td>
                                <td>2,660.31</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
@*         <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header">本周销售与采购信息</div>
                <div class="layui-card-body">
                    <table class="layui-table" style="margin:0;">
                        <colgroup>
                            <col width="150">
                            <col width="300">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>本周销售总额</td>
                                <td>349.00</td>
                            </tr>
                            <tr>
                                <td>本周销售毛利</td>
                                <td>660.31</td>
                            </tr>
                            <tr>
                                <td>本年采购额</td>
                                <td>2,815,102,175.90</td>
                            </tr>
                            <tr>
                                <td>本月采购额</td>
                                <td>1,400,990,823.71</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div> *@
    </div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">业务员销售排名</div>
                <div class="layui-card-body">
                    
                    <div id="salesRank" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
         <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">仓库销售比较分析</div>
                <div class="layui-card-body">
                    <div id="warehouseChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">存货销售比较分析</div>
                <div class="layui-card-body">
                    <div id="inventoryChart" style="width: 100%; height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">客户销售比较分析</div>
                <div class="layui-card-body">
                    <div id="customerChart" style="width: 50%; height: 300px;"></div>
                </div>
            </div>
        </div> 
        @* <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">2019年销售增长分析</div>
                <div class="layui-card-body">
                    <div id="salesChart" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div> *@
    </div>
    
</div> 

<script src="~/layui-v2.9.16/layui/layui.js"></script>
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/layui-v2.9.16/layui/echarts.min.js"></script>

<script>
// layui.use(['table', 'echarts'], function(){
//     var table = layui.table;
//     var echarts = layui.echarts;

//     // 业务员销售排名表格
//     table.render({
//         elem: '#salesRank',
//         cols: [[ //标题栏
//             {field: 'name', title: '业务员'},
//             {field: 'sales', title: '销售额', sort: true}
//         ]],
//         data: [
//             {name: '万喜', sales: 3000},
//             {name: '辛丑', sales: 2500},
//             {name: '聪明', sales: 2000},
//             {name: '孙思', sales: 1500},
//             {name: '小明', sales: 1000},
//             {name: '赵瑞红', sales: 500},
//             // 更多数据...
//         ]
//     });


// 使用Layui的模块化机制
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
 
  
 var mysalesRank = echarts.init(document.getElementById('salesRank'));
    mysalesRank.setOption({
        title: { text: '业务员销售排名' },
        tooltip: {},
        legend: { data: ['销售额'] },
        xAxis: { data: ['李铭', '王潇', '李张莉', '小伊伊', '李咪咪', '赵晓红', '小明'] },
        yAxis: {},
        series: [{ name: '销售额', type: 'bar', data: [1000, 2000, 3000, 4000, 5000, 4000, 3000] }]
    });

 

    // 仓库销售比较分析图表
    var warehouseChart = echarts.init(document.getElementById('warehouseChart'));
    warehouseChart.setOption({
        title: { text: '仓库销售比较分析' },
        tooltip: {},
        legend: { data: ['销售额'] },
        xAxis: { data: ['1号仓库', '2号仓库', '3号仓库', '4号仓库', '5号仓库', '6号仓库', '7号仓库', '8号仓库'] },
        yAxis: {},
        series: [{ name: '销售额', type: 'bar', data: [500, 800, 1200, 1600, 2000, 1200, 1000, 1500] }]
    });

    // 存货销售比较分析图表
    var inventoryChart = echarts.init(document.getElementById('inventoryChart'));
    inventoryChart.setOption({
        title: { text: '存货销售比较分析' },
        tooltip: {},
        legend: { data: ['销售额'] },
        series: [
            {
                name: '销售额',
                type: 'pie',
                radius: '55%',
                data: [
                    { value: 0.94, name: '智能家电' },
                    { value: 4.72, name: '服务器' },
                    { value: 1.89, name: '房产品' },
                    { value: 4.72, name: '餐板设备' },
                    { value: 9.43, name: '电脑' },
                    { value: 47.17, name: '手机' },
                    { value: 28.30, name: '电视' },
                    { value: 1.89, name: '穿戴设备' }
                ]
            }
        ]
    });

    // 客户销售比较分析图表
    var customerChart = echarts.init(document.getElementById('customerChart'));
    customerChart.setOption({
        title: { text: '客户销售比较分析' },
        tooltip: {},
        legend: { data: ['销售额'] },
        xAxis: { data: ['华为荣耀', '一家科技', 'Apple', 'OPPO', '小米科技', '华为科技', 'vivo'] },
        yAxis: {},
        series: [{ name: '销售额', type: 'bar', data: [1000, 2000, 3000, 4000, 5000, 4000, 3000] }]
    });

    // // 初始化销售增长图表
    // var salesChart = echarts.init(document.getElementById('salesChart'));
    // salesChart.setOption({
    //     title: {
    //         text: '2019年销售增长趋势'
    //     },
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //     legend: {
    //         data: ['销售金额', '毛利润额']
    //     },
    //     xAxis: {
    //         type: 'category',
    //         boundaryGap: false,
    //         data: ['2019-05-01', '2019-05-06', '2019-05-11', '2019-05-16', '2019-05-21', '2019-05-26', '2019-05-31']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             name: '销售金额',
    //             type: 'line',
    //             data: [120000, 160000, 140000, 100000, 80000, 60000, 40000]
    //         },
    //         {
    //             name: '毛利润额',
    //             type: 'line',
    //             data: [90000, 120000, 110000, 80000, 70000, 50000, 30000]
    //         }
    //     ]
    // });

    // // 销售金额与毛利润额表格
    // table.render({
    //     elem: '#salesData',
    //     cols: [[ //标题栏
    //         {field: 'date', title: '日期', width: 120},
    //         {field: 'sales', title: '销售金额', width: 120},
    //         {field: 'profit', title: '毛利润额', width: 120}
    //     ]],
    //     data: [
    //         {date: '2019-05-01', sales: 120000, profit: 90000},
    //         {date: '2019-05-06', sales: 160000, profit: 120000},
    //         {date: '2019-05-11', sales: 140000, profit: 110000},
    //         {date: '2019-05-16', sales: 100000, profit: 80000},
    //         {date: '2019-05-21', sales: 80000, profit: 70000},
    //         {date: '2019-05-26', sales: 60000, profit: 50000},
    //         {date: '2019-05-31', sales: 40000, profit: 30000}
    //     ]
    // });



});
</script>
</body>
</html>